<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="年度" prop="deviceName">
                <el-date-picker format="yyyy" value-format="yyyy" v-model="queryParams.year" type="year" placeholder="选择年">
                </el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="计划时间">
          <el-date-picker
            v-model="dateRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['super:plan:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['super:plan:export']">导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="printBox"
                    v-hasPermi="['super:plan:print']">打印</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table @selection-change="handleSelectionChange" fit v-loading="loading" :data="dataList" border>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column show-overflow-tooltip label="流程状态" min-width="100">
                <template slot-scope="scope">
                    <el-tag size="mini">{{ scope.row.statusName }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="年度">
                <template slot-scope="scope">
                    <span>{{ scope.row.year || "--" }}年度质量监控计划</span>
                </template>
            </el-table-column>

            <el-table-column show-overflow-tooltip label="创建时间" prop="createTime" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" v-hasPermi="['super:plan:info']"
                        @click="handleDetail(scope.row)">详情</el-button>
                    <!-- <el-button v-if="scope.row.status === 'draft'" icon="el-icon-edit" size="mini" type="text"
                        v-hasPermi="['monitor:out:edit']" @click="handleUpdate1(scope.row)">修改</el-button> -->
                    <!-- v-if="scope.row.status === 'end'" -->
                    <el-button v-if="scope.row.status === 'draft'" icon="el-icon-edit" size="mini" type="text"
                        v-hasPermi="['super:plan:del']" @click="handleDelete(scope.row)">删除</el-button>
                    <el-button icon="el-icon-edit" size="mini" type="text" v-hasPermi="['super:plan:edit']"
                        @click="handleUpdate(scope.row)">补充信息</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        <!-- 打印模板位置 -->
        <PrintBox :checkNum="8" :printRow="printList" :checkLabel="'contentList'" :isVertical="false" id="printBox">
            <template slot="title" slot-scope="scope">
                <div>{{ scope.item.year }}年度质量监督计划表 STET/B/27-2</div>
            </template>
            <template slot-scope="scope">
                <!-- 表格  class  table-page  必须-->
                <table>
                    <!-- 表头 -->
                    <thead>
                        <tr>
                            <th rowspan="2" style="width: 30mm">部门/月份</th>
                            <th rowspan="12" style="width: 30mm"></th>
                        </tr>
                        <tr>
                            <!-- 表头的月份 -->
                            <!-- <th style="width: 25mm"></th> -->
                            <th style="width: 25mm">1月</th>
                            <th style="width: 25mm">2月</th>
                            <th style="width: 25mm">3月</th>
                            <th style="width: 25mm">4月</th>
                            <th style="width: 25mm">5月</th>
                            <th style="width: 25mm">6月</th>
                            <th style="width: 25mm">7月</th>
                            <th style="width: 25mm">8月</th>
                            <th style="width: 25mm">9月</th>
                            <th style="width: 25mm">10月</th>
                            <th style="width: 25mm">11月</th>
                            <th style="width: 25mm">12月</th>
                        </tr>
                    </thead>
                    <!-- 表体 -->
                    <tbody v-for="(e, i) in scope.item.items">
                        <!-- <div > -->
                        <!-- 第一行部门数据，每4行合并为一个单元格 -->
                        <tr>
                            <td rowspan="4">{{ e.deptName }}</td>
                            <td>监督项目</td>
                            <td>
                                {{ e.oneMonitorProject }}
                            </td>
                            <td>{{ e.twoMonitorProject }}</td>
                            <td>{{ e.threeMonitorProject }}</td>
                            <td>{{ e.fourMonitorProject }}</td>

                            <td>{{ e.fiveMonitorProject }}</td>
                            <td>{{ e.sixMonitorProject }}</td>
                            <td>{{ e.sevenMonitorProject }}</td>
                            <td>{{ e.eightMonitorProject }}</td>
                            <td>{{ e.nineMonitorProject }}</td>
                            <td>{{ e.tenMonitorProject }}</td>
                            <td>{{ e.elevenMonitorProject }}</td>
                            <td>{{ e.twelveMonitorProject }}</td>

                        </tr>
                        <tr>
                            <td>监督对象</td>
                            <td>{{ e.oneMonitorUserName }}</td>
                            <td>{{ e.twoMonitorUserName }}</td>
                            <td>{{ e.threeMonitorUserName }}</td>
                            <td>{{ e.fourMonitorUserName }}</td>
                            <td>{{ e.fiveMonitorUserName }}</td>
                            <td>{{ e.sixMonitorUserName }}</td>
                            <td>{{ e.sevenMonitorUserName }}</td>
                            <td>{{ e.eightMonitorUserName }}</td>
                            <td>{{ e.nineMonitorUserName }}</td>
                            <td>{{ e.tenMonitorUserName }}</td>
                            <td>{{ e.elevenMonitorUserName }}</td>
                            <td>{{ e.twelveMonitorUserName }}</td>
                        </tr>
                        <tr>
                            <td>监督员</td>
                            <td>{{ e.oneInspectorUserName }}</td>
                            <td>{{ e.twoInspectorUserName }}</td>
                            <td>{{ e.threeInspectorUserName }}</td>
                            <td>{{ e.fourInspectorUserName }}</td>
                            <td>{{ e.fiveInspectorUserName }}</td>
                            <td>{{ e.sixInspectorUserName }}</td>
                            <td>{{ e.sevenInspectorUserName }}</td>
                            <td>{{ e.eightInspectorUserName }}</td>
                            <td>{{ e.nineInspectorUserName }}</td>
                            <td>{{ e.tenInspectorUserName }}</td>
                            <td>{{ e.elevenInspectorUserName }}</td>
                            <td>{{ e.twelveInspectorUserName }}</td>
                        </tr>
                        <tr>
                            <td>备注</td>
                            <td>{{ e.oneRemark }}</td>
                            <td>{{ e.twoRemark }}</td>
                            <td>{{ e.threeRemark }}</td>
                            <td>{{ e.fourRemark }}</td>
                            <td>{{ e.fiveRemark }}</td>
                            <td>{{ e.sixRemark }}</td>
                            <td>{{ e.sevenRemark }}</td>
                            <td>{{ e.eightRemark }}</td>
                            <td>{{ e.nineRemark }}</td>
                            <td>{{ e.tenRemark }}</td>
                            <td>{{ e.elevenRemark }}</td>
                            <td>{{ e.twelveRemark }}</td>
                        </tr>
                    </tbody>
                </table>
                <!-- 底部信息位置 -->
                <div class="desc" style="display: flex;
            text-align:left;
              align-items: center;
              margin-top: 10px;
              }">
                    <div style="width: 30%; position: relative">
                        计划编制人：<img style="width: 80px; position: absolute" :src="$VUE_APP_IMG_API + scope.item.esign" />
                    </div>
                    <div style="width: 30%; position: relative">
                        批准人：<template v-if="CheckApprove(scope, 'zlfzr').ShowImg">
                            <img style="width: 80px; position: absolute" :src="CheckApprove(scope, 'zlfzr').ApproveImg" />
                        </template>
                    </div>
                    <div style="width: 30%">
                        批准日期：<span>{{ checkHistoryNode(scope, "zlfzr").commentList[0].time.substring(0, 11) || '' }}</span>
                    </div>
                </div>
                <div class="page-bottom" style="page-break-after: always">
                    <div class="desc" style="page-break-after: always;color:#666">注：本表格自2021年6月1日起生效</div>
                </div>

            </template>
        </PrintBox>
    </div>
</template>
  
<script>
import {
    listYearPlan,
    delQualitySupervisionYearPlan
} from "@/api/quality/supervision/indexPlan.js";
import { deptTreeSelect } from "@/api/system/user.js";
import {
    list,
    delMonitorLedger,
    monitorExport,
} from "@/api/monitor/inOutMonitor.js";
import printStyle from "@/utils/print.js";

export default {
    name: "yearPlan",
    dicts: ["sys_device_check_type"],

    data() {
        return {
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            dataList: [],
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            deptOptions: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,

            },
            // 日期范围
            dateRange: [],
            userList: [],
            deptOptions: [],
            infos: [], //勾选的数据
            printList: [],
        };
    },
    created() {
        const str = sessionStorage.getItem('queryParams');
        if (str) {
            this.queryParams = JSON.parse(str);
            setTimeout(() => {
                sessionStorage.removeItem('queryParams');
            }, 500)
        }
        this.getList();
        this.getDeptTree();
    },
    methods: {
        printBox() {
            //infos  勾选的数据 如果有勾选就打印勾选。
            if (this.infos.length) {
                this.printList = this.infos;
            } else {
                //反之打印当前整个列表
                this.printList = this.dataList;
            }
            setTimeout(() => {
                document.title = "年度质量监控计划表 STET/B/26-1";
                this.$print({
                    printable: "printBox", //打印区域id
                    type: "html", //打印类型是html
                    scanStyles: false,
                    targetStyles: ["*"],
                    style: this.workStyle(),
                    onPrintDialogClose: () => {
                        document.title = process.env.VUE_APP_TITLE;
                    },
                });
            }, 500);
            console.log(this.printList);
        },
        // 可以自定义样式  printStyle 是公共样式 切勿私自修改
        workStyle() {
            return `${printStyle}
          table,
          table tr th,
          table tr td {
            height:17mm;
            padding: 0px;
            font-size: 12px;
          }
          .desc{
          text-align: left; font-size: 12px; margin-top: 10px
        }
              .df {
                  display: flex;
                }
        `;
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.yearQualityMonitorPlanId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
            this.infos = selection;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            sessionStorage.setItem('queryParams', JSON.stringify(this.queryParams));

            console.log(row);
            const configId = row.yearQualityMonitorPlanId || this.ids;
            this.$router.push("./planAdd?isEdit=true&id=" + configId);
        },
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        handleDetail(row) {
            sessionStorage.setItem('queryParams', JSON.stringify(this.queryParams));

            this.$router.push({
                path: "/monitorIn/process/detail/" + row.piid,
                query: {
                    definitionId: null,
                    deployId: null,
                    taskId: null,
                    finished: false,
                    id: row.yearQualityMonitorPlanId,
                },
            });
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const configId = row.yearQualityMonitorPlanId || this.ids;
            let name = this.checkRow(
                configId,
                this.dataList,
                "yearQualityMonitorPlanId",
                "DELETE",
                "year"
            );
            this.$modal
                .confirm('是否确认删除年度为"' + name + '"的数据项？')
                .then(function () {
                    return delQualitySupervisionYearPlan(configId);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        handleAdd() {
            this.$router.push("./planAdd");
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            listYearPlan(
                this.addDateRangeTime(
                    this.queryParams,
                    this.dateRange,
                    "startEndDate",
                    "endEndDate"
                )
            ).then((response) => {
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleExport() {
            this.download(
                "system/monitor/export",
                {
                    ...this.queryParams,
                },
                `内部质量监控表_${this.parseTime(
                    new Date().getTime(),
                    "{y}-{m}-{d}"
                )}.xlsx`
            );
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            // this.dateRange = [];
            this.queryParams.year = "";
            this.resetForm("queryForm");
            this.handleQuery();
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    img {
        width: 100%;
    }
}
</style>
